import PropTypes from 'prop-types'
import React, { memo, useEffect, useRef } from 'react'
import { IndicatorWrapper } from './style'

// 控制一系列元素中，选定的当前元素如何显示（元素是否需要局中显示）  参考轮播图指示器 
const Indicator = memo((props) => {
  const {currentIndex} = props
  const indicatorRef = useRef()
  // 传入的当前元素下标改变则重新执行该函数
  useEffect(() => {
      // 获得显示框宽度 由外界决定
      const client = indicatorRef.current
      // 获得当前元素
      const currentItem = client.children[currentIndex]
      // 获得当前元素组件宽度 
      const clientWidth = client.clientWidth
      // 最多可以移动的距离 = 总内容长度 - 显示框宽度
      const totalDistance = client.scrollWidth - clientWidth
      // 需要移动的距离 = 当前元素中心点距离显示框边 在回退显示框的一半距离 即可以移动到显示框中间位置
      let distance = currentItem.offsetLeft + currentItem.clientWidth / 2  - clientWidth / 2
      // 如果需移动距离为负数 则说明当前元素属于显示框中心点之前的元素 不需要移动（开头前几个元素）
      if(distance < 0) distance = 0
      // 如果需移动距离大于最多可以移动的距离 则说明当前元素属于显示框中心点之后的元素 不需要移动（倒数几个元素）
      if(distance > totalDistance) distance = totalDistance
      // 开始移动当前元素（全部元素一起移动）
      client.style.transform = `translate(${-distance}px)`
  },[indicatorRef, currentIndex])
  return (
    <IndicatorWrapper>
        <div className='indicator-client' ref={indicatorRef}>
            {props.children}
        </div>
    </IndicatorWrapper>
  )
})

Indicator.propTypes = {
    currentIndex: PropTypes.number // 当前显示的指示器下标
}

export default Indicator